<script lang="ts" setup>
import { ref, watch, reactive, nextTick } from 'vue';
import { useRouter } from 'vue-router';
import { useStore } from 'vuex';

import Client from "../../../req/common.js";
import Utils from "../../../req/Utils.js";
import reqApis from "../../../req/reqApis.js";


const router = useRouter();
const store = useStore();

const currentData = ref<any>({
  cartStore: Client.getSession("cart") || [],
  loginBool: false,
  hasProduct: false,
  user:{}
});

const isLogin = () => {
  if(Client.getStore("SHOPToken")) {
    currentData.value.loginBool = true;
    return;
  }
  currentData.value.loginBool = false;
};

const isProduct = () => {
  let cartStore = Client.getSession("cart");
  if(cartStore && cartStore.length>0) {
    currentData.value.hasProduct = true;
    return;
  }
  currentData.value.hasProduct = false;
};

const selectShop = (shopId:any) => {
  router.push({path: "/shopDetail", query: {shopId: shopId}});
};
const selectProduct = () => {
      
};
const toAddress = () => {
  router.push("/addressList");
}

const getUserFn = () => {
  reqApis.getCurrentUserApi({}).then(res => {
    currentData.value.user = res.data;
  })
};

const handleCart = (obj:any, type:any) => {
  if(type == "remove" &&  obj.number>1) {
    obj.number -= 1
  } else if(type == "add") {
    obj.number += 1
  }
  Utils.handleCart(obj.productId, type);
};

const deleteCart = (productId:any) => {
  for(let i=0; i<currentData.value.cartStore.length; i++) {
    for(let j=0; j<currentData.value.cartStore[i].productList.length; j++) {
      
      if(currentData.value.cartStore[i].productList[j].productId == productId) {
        if(currentData.value.cartStore[i].productList.length>1) {
          currentData.value.cartStore[i].productList.splice(j, 1);
          break;
        }else {
          currentData.value.cartStore.splice(i, 1);
          break;
        }
      }
    }
  }
  Utils.deleteCart(productId);
};

const getImg = (str:any, index:any) => {
  let arr = str.split(',')
  return arr[index];
};

const toProductDetail = (item:any) => {
  router.push({path: "/productDetail", query: {productId: item.productId}});
}


watch(
  () => store.state.changeCart,
  (newVal, oldVal) => {
    currentData.value.cartStore = Client.getSession("cart") || [];
    isLogin();
    isProduct();
  }
);


isLogin();
isProduct();
getUserFn();
</script>

<template>
  <section class="wrapper">
    <div class="notLoginUtil" v-if="!currentData.hasProduct">
      <div class="car-logo"></div>
      <div class="text">购物车空空如也，去逛逛吧~</div>
    </div>
    <div class="product" v-else>
      <div class="address" @click="toAddress()">
        <i class="address-icon"></i>{{currentData.user.address}}
      </div>
      <div class="shopWrap" v-for="(shopItem,index) in currentData.cartStore" :key="index">
        <div class="shopTitle" @click="selectShop(shopItem.shopId)"><i class="select-icon" :class="{'active': true}"></i><i class="shop-icon"></i>
          {{shopItem.shopName}}
        </div>
        <div  @click="toProductDetail(item)" class="product-item" v-for="(item, ind) in shopItem.productList" :key="ind">
          <div class="select-wrap">
            <i class="icon" :class="{'active': true}"></i>
          </div>
          <div class="info">
            <div class="product-icon" :style="{background: `#333 url(${getImg(item.productIcon, 0)}) no-repeat center`}"></div>
            <div class="product-info">
              <div class="name">{{item.productDescription}}</div>
              <div class="num-wrap">
                <div class="price">￥{{item.productPrice}}.00</div>
                <div class="handle">
                  <span class="minus" @click.stop="handleCart(item, 'remove')"></span>
                  <span class="count">{{item.number}}</span>
                  <span class="add"  @click.stop="handleCart(item, 'add')"></span>
                </div>
              </div>
              <div class="del"><span @click.stop="deleteCart(item.productId)">删除</span></div>
            </div>
          </div>
        </div>
        
      </div>
     
    </div>
  </section>
</template>

<style lang="less" scoped>
.wrapper{
  width: 3.75rem;
  .notLoginUtil {
    width: 3.75rem;
    padding: .3rem 0 .15rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    .car-logo {
      width: .9rem;
      height: .9rem;
      background: url("../../../assets/images/cart-icon-1.png") no-repeat center;
      background-size: contain;
    }
    .text {
      font-size: .16rem;
      color: rgba(51,51,51,.66);
      padding: .15rem 0;
    }
    .btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: .6rem;
      height: .3rem;
      color: #e93b3d;
      font-size: .14rem;
      position: relative;
      margin-bottom: .15rem;
      &::after {
        content: "";
        width: 200%;
        height: 200%;
        position: absolute;
        top: 0;
        left: 0;
        border: 1px solid #e93b3d;
        -webkit-transform: scale(0.5, 0.5);
        border-radius: .04rem;
        transform: scale(0.5, 0.5);
        transform-origin: top left;
      }
    }
  }
  .product {
    .address {
      height: .45rem;
      background: white;
      display: flex;
      align-items: center;
      position: relative;
      padding: 0 .1rem;
      color: #999;
      font-size: .14rem;
      &::after {
        width: 100%;
        height: 0;
        content: "";
        position: absolute;
        border-bottom: .01rem solid #f2f2f2;
        bottom: 0;
        left: 0;
      }
      .address-icon {
        width: .13rem;
        height: .15rem;
        background: url("../../../assets/images/address-icon-1.png") no-repeat center;
        background-size: contain;
        margin-right: .1rem;
      }
    }
    .shopWrap {
      background: white;
      .active {
        background: url("../../../assets/images/select-icon-2.png") no-repeat center !important;
      }
      .shopTitle {
        height: .4rem;
        display: flex;
        align-items: center;
        font-size: 16px;
        font-weight: 700;
        .select-icon {
          width: .2rem;
          height: .2rem;
          margin: 0 .1rem;
          background: url("../../../assets/images/select-icon-1.png") no-repeat center;
          background-size: cover!important;
        }
        .shop-icon {
          width: .2rem;
          height: .16rem;
          margin-right: .05rem;
          background: url("../../../assets/images/shop-icon-3.png") no-repeat center;
          background-size: contain;
        }
      }
      .product-item {
        display: flex;
        padding-bottom: .15rem;
        border-bottom: .01rem solid #f2f2f2;
        .select-wrap {
          width: .4rem;
          display: flex;
          align-items: center;
          justify-content: center;
          .icon {
            width: .2rem;
            height: .2rem;
            background: url("../../../assets/images/select-icon-1.png") no-repeat center;
            background-size: cover!important;
          }
        }
        .info {
          flex: 1;
          display: flex;
          .product-icon {
            width: .75rem;
            height: .75rem;
            background-size: cover !important;
            margin-right: .1rem;
          }
          .product-info {
            flex: 1;
            color: #333;
            padding-right: .1rem;
            .name {
              font-size: .14rem;
              line-height: .18rem;
              margin-bottom: .1rem;
            }
            .num-wrap {
              width: 2.4rem;
              display: flex;
              align-items: center;
              justify-content: space-between;
              height: .3rem;
              margin-bottom: .02rem;
              .price {
                font-size: 16px;
                color: #e93b3d;
              }
              .handle {
                display: flex;
                span {
                  width: .3rem;
                  height: .3rem;
                  background: #f7f7f7;
                  border-radius: .04rem;
                  margin: 0 .02rem;
                }
                .minus {
                  position: relative;
                  &::after {
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    content: "";
                    display: block;
                    width: .16rem;
                    height: .02rem;
                    margin: -.01rem 0 0 -.08rem;
                    background: #999;
                    border-radius: .01rem;
                  }
                }
                .count {
                  width: .45rem;
                  line-height: .3rem;
                  text-align: center;
                  font-size: 12px;
                  color: #999;
                }
                .add {
                  position: relative;
                  &::after {
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    content: "";
                    display: block;
                    width: .02rem;
                    height: .16rem;
                    margin: -.08rem 0 0 -.01rem;
                    background: #999;
                    border-radius: .01rem;
                  }
                  &::before {
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    content: "";
                    display: block;
                    width: .16rem;
                    height: .02rem;
                    margin: -.01rem 0 0 -.08rem;
                    background: #999;
                    border-radius: .01rem;
                  }
                }
              }
            }
            .del {
              height: .2rem;
              display: flex;
              align-items: center;
              justify-content: flex-end;
              span {
                height: .2rem;
                line-height: .2rem;
                padding: 0 .1rem;
                color: #999;
                font-size: .14rem;
              }
            }
          }
        }
      }
    }
  }
}

</style>
